<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大镜</title>
<style>
#box{
display: flex;
justify-content: center;
}


.left{
width:200px;
height:200px;
background: url('01.jpg');
position: relative;
background-size: 100% 100%;
}

.right{
width:200px;
height:200px;
position: relative;
overflow:hidden;
}

.shadow{
width:100px;
height:100px;
background: rgba(0,0,0,0.5);
display: none;
position: absolute;
}

.left:hover .shadow{
    display: block;
}

.right img{
    width:400px;
    height:400px;
    position: absolute;
}

</style>
</head>
<body>
<div id="box">  
    <div class="left">
        <div class="shadow"></div>
    </div>

    <div class="right">
        <img src="01.jpg" alt="">
    </div>

</div>
</body>
<script>
    function fn(ele){
        return document.querySelector(ele);
    }

    fn('.left').onmousemove=function(e){
        var x=e.clientX-this.offsetLeft;
        var y=e.clientY-this.offsetTop;
         x = x-50
         y = y-50
         x = x<0 ? 0 : x
         y = y<0 ? 0 : y
         x = x>100 ? 100 : x
         y = y>100 ? 100 : y

    fn('.shadow').style.left=x+'px';
    fn('.shadow').style.top=y+'px';

    var rx=x*2;
    var ry=y*2;

    fn('img').style.left=-rx+'px';
    fn('img').style.top=-ry+'px';
}
</script>
</html>